<template>
      <!-- 文章主体 -->
    <div class="detail-page">
     <van-nav-bar
      left-text="返回"
      @click-left="$router.back()"
      fixed>
        <template #right>
          <van-icon @click="showShare = true" name="ellipsis" size="18" />
        </template>
     </van-nav-bar>
      <!-- 头部：标题 时间 作者 -->
      <div class="header">
        <h3 class="title">{{ list.title }}</h3>
        <div class="time">
          <span>{{ list.pubdate }}</span>
          <span>|</span>
          <span>{{ list.read_count }} 阅读</span>
          <span>|</span>
          <span>{{ list.comm_count }} 评论</span>
        </div>
        <div class="author van-hairline--bottom">
          <van-image
              round
              width="10vw"
              height="10vw"
              :src="list.aut_photo"
            />
          <span class="name">{{ list.aut_name }}</span>
          <van-button round size="small" color="#FC6627" @click="foll">{{ list.is_followed ? '取消关注' : '关注' }}</van-button>
        </div>
      </div>
      <!-- 内容：文章内容 -->
      <div class="main">
        <div class="html" v-html="list.content"></div>
        <div class="space">
          <!-- <van-empty image="error" description="暂时没有评论,篮子,赶紧来占座" /> -->
          <ArticleComment :id="target"></ArticleComment>
        </div>
      </div>
      <!-- 评论：评论组件 -->

    <div class="footer van-hairline--top">
      <div class="input">
        <van-field v-model="value" left-icon="edit" placeholder="黑子请开始你的表演" @click="show = true"/>
      </div>
      <div class="btn"><van-icon @click="show = true" name="chat-o"></van-icon><p>评论</p><i class="iii">{{ list.comm_count }}</i></div>
      <div class="btn"><van-icon @click="give" :name="list.attitude === 1 ? 'good-job-o' : 'good-job'"></van-icon><p>点赞</p></div>
      <div class="btn"><van-icon @click="coll" :name="list.is_collected ? 'like' : 'like-o' "></van-icon><p>收藏</p></div>
      <div class="btn"><van-icon @click="showShare = true" class="van-icon" name="share-o"></van-icon><p>分享</p></div>
    </div>
    <van-popup v-model="show" position="top" :style="{ height: '100%' }">
      <van-nav-bar
        title="评论文章"
        right-text="发表"
        left-arrow
        @click-left="show = false"
      />
      <van-field
        v-model="value"
        type="textarea"
        placeholder="请开始你的狗叫"
      />
    </van-popup>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      />
  </div>
</template>

<script>
import { getDetail, likeArticle } from '@/api/articl'
import ArticleComment from '@/components/ArticleComment.vue'
import { followAuthor, collAuthor } from '@/api/user'
export default {
  name: 'DetailPage',
  components: { ArticleComment },
  data () {
    return {
      list: {},
      value: '',
      show: false,
      target: this.$route.params.id,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' }
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' }
        ]
      ]
    }
  },
  async created () {
    console.log(this.$route.params.id)
    const res = await getDetail(this.target)
    console.log(res.data.data)
    this.list = res.data.data
  },
  methods: {
    async give () {
      if (this.list.attitude === 1) {
        await likeArticle(this.target, false)
        this.$toast.success('点赞成功')
        this.list.attitude = -1
      } else {
        await likeArticle(this.target, true)
        this.$toast.success('取消点赞')
        this.list.attitude = 1
      }
    },
    // 关注
    async foll () {
      const state = !this.list.is_followed
      console.log(state)
      await followAuthor(this.target, state)
      // if (err) return this.$toast.success('操作失败')
      this.$toast.success(state ? '关注成功' : '取消关注')
      this.list.is_followed = state
    },
    // 收藏
    async coll () {
      const state = !this.list.is_collected
      console.log(state)
      await collAuthor(this.target, state)
      // if (err) return this.$toast.success('操作失败')
      this.$toast.success(state ? '收藏成功' : '取消收藏')
      this.list.is_collected = state
    }
  }
}
</script>

<style lang="less" scoped>
.detail-page {
  height: 100%;
  overflow-y: auto;
  padding: 44px 0 50px;
  // 头部
  .header {
    padding: 0 16px;
    .title {
      font-size: 20px;
      font-weight: normal;
      padding: 10px 0;
      margin: 0;
    }
    .time {
      font-size: 12px;
      color: #999;
      span:nth-child(2n) {
        margin: 0 5px;
        color: #ccc;
        position: relative;
        top: -1px;
      }
    }
    .author {
      display: flex;
      align-items: center;
      padding: 10px 0 ;
      .name {
        flex: 1;
        padding-left: 10px;
        font-size: 16px;
      }
    }
  }
  // 内容
  .main {
    margin-bottom: 50px;
    .space {
      height: 16px;
      // background: @geek-gray-color;
    }
    .html {
      word-break: break-all;
      width: 100%;
      overflow: hidden;
      padding: 20px 16px;
      /deep/ img {
        max-width:100%;
        background: #f9f9f9;
      }
      /deep/ pre {
        white-space: pre-wrap;
        code {
          white-space: pre;
        }
      }
    }
  }
}
  // .opt {
  //   position: fixed;
  //   bottom: 100px;
  //   right: 0;
  //   .van-icon {
  //     margin-right: 20px;
  //     background: #fff;
  //     width: 40px;
  //     height: 40px;
  //     line-height: 40px;
  //     text-align: center;
  //     border-radius: 50%;
  //     box-shadow: 2px 2px 10px #ccc;
  //     font-size: 18px;
  //     &.active {
  //       background: #FEC635;
  //       color: #fff;
  //     }
  //   }
  // }
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 50px;
    background: #fff;
    display: flex;
    width: 100%;
    align-items: center;
    .input {
      margin-left: 10px;
      width: 200px;
      height: 34px;
      // background: @geek-gray-color;
      border-radius: 17px;
      line-height: 36px;
      padding-left: 10px;
      // display: flex;
      // .van-icon {
      //   color: #999;
      //   line-height: 34px;
      //   margin-top: 5px;
      // }
      // .van-aa{
      // }
    }
    .btn {
      flex: 1;
      text-align: center;
      position: relative;
      p {
        margin: 0;
        font-size: 10px;
      }
      .van-icon {
        font-size: 18px;
      }
      .iii {
        height: 16px;
        min-width: 16px;
        padding: 0 3px;
        color: #fff;
        font-size: 10px;
        position: absolute;
        right: 0;
        top: -4px;
        line-height: 16px;
        border-radius: 8px;
        font-style: normal;
        z-index: 2;
        background-color: #f1695f;
      }
    }
  }
</style>
